/**  
* 手动滚动图片  
*   
**/  
$.extend({  
	imgfocus: function(opt, callback) { 
		this.defaults = {  
		// 滚动区域id  
		objId: "",  
		// 是否在大图下方显示标题  
		showTitle: false,  
		// 每行的宽度  
		width: 300,  
		// div的高度  
		height: 100,  
		// 每次滚动的行数  
		line: 1,  
		// 自动滚动的行数  
		autoLine: 1,  
		// 动作时间  
		speed: 0,  
		// 滚动间隔  
		interval: 3000,  
		// 图片根目录  
		imgPath: "",  
		// 间隔句柄，不需要设置，只是作为标识使用  
		picTimer: 0,  
		// 按钮透明度  
		opacity: 0.3  
	};  
		
	//参数初始化  
	var opts = $.extend(this.defaults, opt);  
	// 定义外层元素样式  
	$("#" + opts.objId).css({  
		"position": "relative",  
		"overflow": "hidden",  
		"width": (opts.line * opts.width) + "px"  
	});  
		
	// 定义ul样式  
	$("#" + opts.objId + " ul").css({  
		"width": opts.width * $("#" + opts.objId + " ul").find("li").size() + "px",  
		"height": opts.height + "px"  
	});  
		
	// 定义li样式  
	$("#" + opts.objId + " ul li").css({  
		"display": "block",  
		"float": "left",  
		"width": opts.width + "px",  
		"height": opts.height + "px"  
	});  
		
	// 定义img样式  
	$("#" + opts.objId + " ul li img:first").css({  
		"display": "block",  
		"float": "left",  
		"width": opts.width + "px",  
		"height": opts.height + "px"  
	});  
		
	if (opts.showTitle) {  
		$("#" + opts.objId).append("<div id=\"imgfocus_banner\" />");  
		$("#imgfocus_banner").css({  
			"width": opts.width + "px",  
			"height": "20px",  
			"background": "#333",  
			"position": "absolute",  
			opacity: 0.7,  
			"text-align": "center",  
			"color": "#FFF",  
			"left": "0px",  
			"top": (opts.height - 20) + "px"  
		});  
		$("#imgfocus_banner").html("<div id=\"imgfocus_banner_title\" />");  
		$("#imgfocus_banner_title").text("text");  
		$("#imgfocus_banner_title").css({  
			"display": "block",  
			"float": "left",  
			"width": (opts.width - 20 * $("#" + opts.objId + " ul li").size()) + "px",  
			"height": "20px"  
		});  
		
		$("#" + opts.objId + " ul li").each(function(index) {  
			$(this).attr("index", index);  
			$("#imgfocus_banner").append("<div id=\"imgfocus_banner_squ" + index + "\" class=\"imgfocus_banner_squ\" >" + (index + 1) + "</div>");  
			var bgColor;  
			$("#imgfocus_banner_squ" + index).mouseover(function() {  
				bgColor = $(this).css("background");  
				$(this).css({  
					"background": "#CC0"  
				});  
			}).mouseleave(function() {  
				$(this).css({  
					"background": bgColor  
				});  
			});  
			// 数字块点击事件  
			$("#imgfocus_banner_squ" + index).click(function() {  
				var length = $("#" + opts.objId + " ul li[index=" + index + "]").prevAll().size();  
				var scrollWidth = 0 - length * opts.width - (0 - $("#" + opts.objId).find("ul:first").css("margin-left").replace("px", ""));  
		
				$("#" + opts.objId).find("ul:first").animate({  
					marginLeft: scrollWidth  
				},  
				6,  
				function() {  
					for (i = 1; i <= length; i++) {  
						$("#" + opts.objId).find("li:first").appendTo($("#" + opts.objId).find("ul:first"));  
					}  
					$("#" + opts.objId).find("ul:first").css({  
								  marginLeft: 0  
					});  
					var index = $("#" + opts.objId).find("li:first").attr("index");  
					// 数字标签全部变灰色  
					$(".imgfocus_banner_squ").css({  
						"background": "#CCC"  
					});  
					// 活动的数字标签变红色  
					$("#imgfocus_banner_squ" + index).css({  
						"background": "#C00"  
					});  
					bgColor = "background:#C00";  
					changeTitle();  
				});  
			});  
		});  
		// 数字块样式  
		$(".imgfocus_banner_squ").css({  
			"display": "block",  
			"float": "left",  
			"margin": "1px",  
			"width": "18px",  
			"height": "18px",  
			"color": "#000",  
			"background": "#CCC"  
		});  
		// 第一个数字块样式  
		$(".imgfocus_banner_squ:first").css({  
			"background": "#C00"  
		});  
	}  
		
	/**  
	* 自动横向滚动  
	*/  
	function scrollLeft() {  
		var scrollWidth = 0 - opts.autoLine * opts.width - (0 - $("#" + opts.objId).find("ul:first").css("margin-left").replace("px", ""));  
		$("#" + opts.objId).find("ul:first").animate({  
			marginLeft: scrollWidth  
		},  
		opts.speed,  
		function() {  
		for (i = 1; i <= opts.autoLine; i++) {  
			$("#" + opts.objId).find("li:first").appendTo($("#" + opts.objId).find("ul:first"));  
		}  
		$("#" + opts.objId).find("ul:first").css({  
			marginLeft: 0  
		});  
		var index = $("#" + opts.objId).find("li:first").attr("index");  
		changeTitle();  
		// 数字标签全部变灰色  
		$(".imgfocus_banner_squ").css({  
			"background": "#CCC"  
		});  
		// 活动的数字标签变红色  
		$("#imgfocus_banner_squ" + index).css({  
			"background": "#C00"  
		});  
	});  
};  
		
/**  
* 切换标题  
*/  
function changeTitle(){  
	$("#imgfocus_banner_title").text($("#" + opts.objId).find("li:first img:first").attr("alt"));  
}  
		
/**  
* 鼠标滑上后显示按钮  
*/  
$("#" + opts.objId).hover(function() {  
	$("#button_left").css({  
		opacity: 1  
	});  
	$("#button_right").css({  
		opacity: 1  
	});  
},  
function() {  
	$("#button_left").css({  
		opacity: opts.opacity  
	});  
	$("#button_right").css({  
		opacity: opts.opacity  
	});  
}).trigger("mouseleave");  
		
/**  
* 最先执行的函数  
* 鼠标滑上焦点图时停止自动播放，滑出时开始自动播放  
*/  
// 初始化标题  
changeTitle();  
$("#" + opts.objId).hover(function() {  
	clearInterval(opts.picTimer);  
},  
function() {  
	opts.picTimer = setInterval(function() {  
	scrollLeft();  
},  
	opts.interval); // 自动播放的间隔，单位：毫秒  
}).trigger("mouseleave");  
}  
});  